<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <input id='input' />
        <p id='p'></p>
	</body>
    <script type="text/javascript">
        // proxy  vue3.0中将要废弃defineproperty改用Proxy
        const input = document.getElementById('input');
        const p = document.getElementById('p');
        const obj = {};

        const newObj = new Proxy(obj, {
            get: function(target, key, receiver) {
                // console.log(`getting ${key}!`);
                return Reflect.get(target, key, receiver);
            },
            set: function(target, key, value, receiver) {
                // console.log(target, key, value, receiver);
                if (key === 'text') {
                    input.value = value;
                    p.innerHTML = value;
                }
                return Reflect.set(target, key, value, receiver);
            },
            getPrototypeOf:function(target){//getPrototypeOf方法必须返回一个对象 获取原型是级会触发
                // console.log('target',target)
                return target
            },
            setPrototypeOf :function(target,value){//当对象被设置原型的时候会执行我们设定的代码,target为目标对象，value为设置的原型
                // console.log('target',target)
                // console.log('value',value)
                return target
            }
        });

        input.addEventListener('keyup', function(e) {
            newObj.text = e.target.value;
        });
        
        newObj.text='haha'
        newObj.nam='xw'
        console.log('newObj',newObj)
        console.log('obj',obj)
        // newObj.__proto__ = Object.prototype//触发setPrototypeOf
        // console.log('newObj',newObj.__proto__)//getPrototypeOf


        // 对比Reflect和Object
        // console.log('Reflect',Reflect)
        // console.log('Object',Object.prototype)




        
        // defineproperty vue3.0中将要废弃改用Proxy
        /*
        const input = document.getElementById('input');
        const p = document.getElementById('p');
        const obj={name:'zy'};
        var v = obj.name;

        input.value = v;
        p.innerHTML = v;

        Object.defineProperty(obj,'name',{
            get:function(){
                return v;
            },
            set:function(val){
                if(val!=v){
                    input.value = val;
                    p.innerHTML = val;
                }
                
            }
        })

        input.addEventListener('keyup', function(e) {
            obj.name = e.target.value;
        });
        */

	</script>
</html>
